<template>
    <view class="content">
        <view class="top">
			<u-search placeholder="体检中心名称" :show-action="false" v-model="keyword" @search="doSearch"></u-search>
			<view class="nav">
				<view @click="show_1 = true">
					{{cityName}}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-15"></u-icon>
				</view>
				<view @click="show_2 = true">
					{{brandName}}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-15"></u-icon>
				</view>
				<view @click="show_3 = true">
					{{sortName}}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-15"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="item" v-for="(item, index) in list" :key="index" @click="toList(item)">
			<view class="title">{{item.name}}</view>
			<view class="add">
				<view class="u-flex-1">{{item.address}}</view>
				<view class="add-r" v-if="item.distance">
					<u-icon name="map-fill" color="#01b6bc" size="24" class="u-m-r-10"></u-icon>
					距离 {{item.distance}}
				</view>
			</view>
			<view class="text" v-if="item.man_sale_price || item.sale_price">
				<view>{{item.pay_type_txt}}：</view>
				<view class="u-flex-1">
					<view class="u-p-b-10" v-if="item.man_original_price && item.man_sale_price">
						男 原价¥{{item.man_original_price}}、会员价¥{{item.man_sale_price}}
					</view>
					<view class="u-p-b-10" v-if="item.original_price && item.sale_price">
						女 原价¥{{item.original_price}}、会员价¥{{item.sale_price}}
					</view>
				</view>
			</view>
			
			<view class="btns" v-if="card_id">
				<view class="n-btn" @click.stop="next(item)">下一步</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
		
		<!-- <template v-if="show"> -->
			<baidu-map class="bm-view" :center="centerPoint" :zoom=10 @ready="handler"></baidu-map>
		<!-- </template> -->
		
		
		<view class="footer" v-if="!card_id">
			<view class="btn" @click="toDestined">体检预约</view>
		</view>
		
		<u-select v-model="show_1" mode="mutil-column-auto" :list="region" child-name="child" 
			value-name="id" label-name="name" @confirm="confirmCity"></u-select>
			
		<u-select v-model="show_2" mode="single-column" :list="brand"
			value-name="id" label-name="name" @confirm="confirmBrand"></u-select>
			
		<u-select v-model="show_3" mode="single-column" :list="sort" @confirm="confirmSort"></u-select>
    </view>
</template>

<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=hWRWsorChxHE7FO34oBCmoQZeLk61fxF&s=1"></script> -->
<script>
	import Vue from 'vue'
	import BaiduMap from 'vue-baidu-map'
	import {
		BmlMarkerClusterer,
	} from 'vue-baidu-map'
	
	Vue.use(BaiduMap, {
		ak: 'FT45AywaU7jFxvjWC5a48DKmmMBOfx9J'
	});
    export default {
		components: {
			BmlMarkerClusterer,
		},
        data() {
            return {
				show_1: false,
				show_2: false,
				show_3: false,
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
                keyword: '',
				lat: '',
				log: '',
				region: [],//省市
				cityId: '',
				cityName: '选择城市',
				brand: [],//品牌
				brandId: '',
				brandName: '选择品牌',
				sort: [{value: '0',label: '全部'},{value: '1',label: '价格升序'},{value: '2',label: '价格降序'}],
				sortId: 0,
				sortName: '全部',
				info: {},
				card_id: '',//健康卡编号
				
				
				// centerPoint: {
				// 	lng: 125.311786,
				// 	lat: 43.897733
				// },
				centerPoint: {
					lng: '',
					lat: ''
				},
				locPoint: {

				},
				locName: "我的位置",
				show: false
            };
        },
		onLoad(option) {
			if (option.card_id) {
				this.card_id = option.card_id
			}
			this.getRegion()
			this.getBrand()
		},
		onReady() {
			// this.handler()
		},
		onShow() {
			
			// this.log = 125.311786
			// this.lat = 43.897733
			// setTimeout(() => {
				
			// },3000)
			
			
			this.$getLocation((latitude,longitude) => {
			    console.log('000',latitude, longitude)
			    this.lat = latitude
				this.log = longitude
				
				this.centerPoint = {
					lng: longitude,
					lat: latitude
				}
				// this.reverseGeocode(this.log,this.lat)
				this.reverseGeocode2()
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			})
			this.getInfo()
		},
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
			reverseGeocode2() {
				console.log('reverseGeocode2')
				uni.request({
				    url:`http://api.map.baidu.com/reverse_geocoding/v3/?ak=FT45AywaU7jFxvjWC5a48DKmmMBOfx9J&output=json&coordtype=wgs84ll&location=${this.lat,this.log}`,
					// url: `http://api.map.baidu.com/geocoder/v2/?location=${this.lat,this.log}&output=json&ak=hWRWsorChxHE7FO34oBCmoQZeLk61fxF&pois=1`,
					// url: `http://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=hWRWsorChxHE7FO34oBCmoQZeLk61fxF&callback=showLocation `,
				    dataType: 'jsonp',
					callback: 'BMap._rd._cbk43398',
					method: 'GET',
				    success: (ret) => {
						console.log('uni.request',ret)
				        // var result = res.result,
				        // addressComponent = result.addressComponent,
				        // adcode = addressComponent.adcode
				    },
				    fail: (res) => {
				        console.log('fail',res)
				    },
				});
			},
			
			handler({
					BMap,
					map
				}) {
					// console.log(BMap, map)
					
					this.reverseGeocode2()
					this.reverseGeocode(this.log,this.lat)
					
			},
			
			reverseGeocode(longitude, latitude) {
				let _this = this
				// this.$bmapsdk.Point(longitude,latitude, (result)=> {
				// 	console.log(result)
				// })
				var point = new BMap.Point(longitude, latitude);
				var gc = new BMap.Geocoder();
				
				gc.getLocation(point, function(rs) {
					
					console.log('reverseGeocode',rs,rs.addressComponents.city)
					if (rs.addressComponents.city) {
						_this.cityName = rs.addressComponents.city
						
						gc.getPoint(rs.address, function(ret) {
							
							console.log('getPoint',ret)
							
						});
					}
				});
				
				
				
				// this.$bmapsdk.regeocoding({
				// 	location: {
				// 		latitude: latitude,
				// 		longitude: longitude,
				// 	},
				// 	success: function(result) {
				// 		console.log('regeocoding',result)
				// 	},
				// 	fail: function(error) {
						
				// 	},
				// })
			},
			
			// 下一步
			next(item) {
				this.$gTo(`./destined-3?card_id=${this.card_id}&center_id=${item.id}`)
			},
			
			// 体检预约
			toDestined() {
				if (!this.$getSync('MOBILE')) {
					this.$confirm('请先绑定手机号', data => {
						this.$gTo(`/pages/login/binephone`)
					})
				} else {
					if (this.info.cards_nums > 0 && this.info.is_bind > 0){
						this.$gTo(`./destined-1`)
					} else {
						if (this.info.cards_nums == 0) {
							this.$confirm('请先购买健康管理卡', data => {
								this.$gTo(`/pages/settle/settle`)
							})
						} else if (this.info.is_bind == 0) {
							this.$confirm('请先绑定健康管理卡', data => {
								this.$gTo(`/pages/vip/list`)
							})
						}
					}
				}
			},
			
			getInfo() {
				this.$ajax('members', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.info = ret.data
						this.$setSync('MOBILE', ret.data.mobile);
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			toList(item) {
				// this.$gTo(`./list-2?id=${item.id}&name=${item.name}&address=${item.address}&distance=${item.distance}`)
				this.$gTo(`./list-2?id=${item.id}`)
			},
			
			confirmCity(e) {
				console.log(e)
				this.cityId = e[1].value
				this.cityName = e[1].label
				this.doSearch()
			},
			
			confirmBrand(e) {
				console.log(e)
				this.brandId = e[0].value
				this.brandName = e[0].label
				this.doSearch()
			},
			
			confirmSort(e) {
				console.log(e)
				this.sortId = e[0].value
				this.sortName = e[0].label
				this.doSearch()
			},
			
			getRegion() {
				this.$ajax('get_centers_region', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.region = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getBrand() {
				this.$ajax('get_centers_brand', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.brand = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			doSearch() {
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			},
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('get_centers', {
			        userToken: this.$getSync('userToken'),
			        page: this.page,
			        limit: 10,
			        city_id: this.cityId,
					brand_id: this.brandId,
					keywords: this.keyword,
					sort: this.sortId,//1-价格升序 2-价格降序
					lat: this.lat,//纬度
					lng: this.log,//经度
			    }).then(ret => {
					if (ret.status == 0) {
			            if (ret.data.length > 0) {
			            	this.list = this.list.concat(ret.data);
			            	this.page++;
			            	this.status = 'loadmore'
			            } else {
			            	this.status = 'nomore'
			            }
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			
        }
    };
</script>

<style lang="scss">
	.btns{
		padding-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.n-btn{
		font-size: 26rpx;
		color: #00b6bc;
		padding: 10rpx 36rpx;
		border: 2rpx solid #00b6bc;
		border-radius: 50rpx;
	}
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding-bottom: 70px;
	}
	.top{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.nav{
		padding-top: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.item{
		padding: 30rpx 30rpx 20rpx;
		margin: 0 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 15rpx;
	}
	.add{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #696969;
		padding-bottom: 10rpx;
	}
	.add-r{
		color: #00b6bc;
		padding-left: 20rpx;
	}
	.text{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 24rpx;
		color: #696969;
	}
	
	.footer{
		width: 750rpx;
		height: 120rpx;
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	

</style>
